<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 的 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <title>PI HD FPV</title>
</head>
<body>
<div class="main" id="app">
    <h5 class="display-5">设备</h5>
    <h6 v-if="config.Activewidth == 0">设备未连接</h6>
    <div class="d-flex flex-wrap mb-3">
        <div class="p-2 bd-highlight">((config.Activewidth))*((config.Activeheight))</div>
        <div class="p-2 bd-highlight">((config.Pixelclock))</div>
        <div class="p-2 bd-highlight">((config.video))</div>
    </div>
    <button type="button" class="btn btn-primary" v-on:click="fetchData">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise"
             viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
        </svg>
    </button>

    <h5 class="display-5 mt-3">服务器</h5>
    <h6>服务器状态：<span v-if="config.server == 'off'" class="text-danger">未启动</span>
        <span class="text-success" v-else>已启动</span></h6>
    <button type="button" class="btn btn-primary" v-if="config.server == 'off'" v-on:click="server">启动服务器</button>
    <button type="button" class="btn btn-warning" v-else v-on:click="server">关闭服务器</button>


    <h5 class="display-5 mt-3">推流</h5>
    <div class="form-check form-check-inline  mb-3">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="local"
               checked v-model="serverType" @change="changeServerType($event)">
        <label class="form-check-label" for="inlineRadio1">本地</label>
    </div>
    <div class="form-check form-check-inline  mb-3">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="remote"
               v-model="serverType" @change="changeServerType($event)">
        <label class="form-check-label" for="inlineRadio2">远程</label>
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text">服务器地址</span>
        <input type="text" class="form-control" v-model="serverUrl" :readonly="serverType == 'local'" @change="changeUrl($event)">
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text">端口</span>
        <input type="text" class="form-control" v-model="port" :readonly="serverType == 'local'" >
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text">路径</span>
        <input type="text" class="form-control" v-model="streamPath" :readonly="serverType == 'local'" >
    </div>

    <div class="input-group mb-3" v-if="srtmode != 'caller'">
        <span class="input-group-text">拉流地址</span>
        <input type="text" class="form-control" :value="streaming+'://'+hostname+':'+port+'/'+streamPath" id="fullurl">
        <button class="btn btn-outline-secondary btn" type="button" id="button-addon2" data-clipboard-target="#fullurl">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
                <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
            </svg>
        </button>
    </div>

    <div v-if="isStreaming == false">
        <div class="input-group mb-3">
            <span class="input-group-text">分辨率</span>
            <select class="form-select" aria-label="Default select example" v-model="resolution">
                <option selected :value="resolution">((resolution))</option>
            </select>
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">格式</span>
            <select class="form-select" aria-label="Default select example" v-model="streaming"
                    v-on:change="selectFormat">
                <option value="rtmp">RTMP [TCP]</option>
                <option value="rtsp">RTSP [TCP]仅视频</option>
                <option value="hls" disabled>HLS [TCP]</option>
                <option value="srt">SRT [UDP]</option>
            </select>
        </div>

        <div class="input-group mb-3" v-if="streaming == 'srt'">
            <span class="input-group-text">SRT模式</span>
            <select class="form-select" aria-label="Default select example" v-model="srtmode"
                    v-on:change="selectSrtMode">
                <option value="listener">Listener</option>
                <option value="caller">Caller</option>
            </select>
        </div>

        <div class="input-group mb-3" v-if="srtmode == 'caller'">
            <span class="input-group-text">SRT 地址</span>
            <input type="text" class="form-control" v-model="srtip">
        </div>

        <div class="input-group mb-3" v-if="srtmode == 'caller'">
            <span class="input-group-text">SRT 端口</span>
            <input type="text" class="form-control" v-model="srtport">
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">码率</span>
            <input type="text" class="form-control" v-model="bitrate">
            <span class="input-group-text">vbitrate</span>
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">帧率</span>
            <input type="text" class="form-control" v-model="fps">
            <span class="input-group-text">FPS</span>
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">音频</span>
            <select class="form-select" aria-label="Default select example" v-model="audionCard"
                    v-if="streaming != 'rtsp'">
                <option v-for="obj in config['audiocard']" :value="obj.value">((obj.name))</option>
            </select>
            <select class="form-select" aria-label="Default select example" v-model="audionCard"
                    v-if="streaming == 'rtsp'">
                <option value="mute">Mute</option>
            </select>
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">声音码率</span>
            <input type="text" class="form-control" v-model="audionbitrate">
            <span class="input-group-text">abitrate</span>
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">声道</span>
            <select class="form-select" aria-label="Default select example" v-model="audionChannel">
                <option selected value="2">双声道</option>
                <option value="1">单声道</option>
            </select>
        </div>
    </div>
    <button type="button" class="btn btn-primary" v-on:click="submit"
            v-if="isStreaming == false && config.Activewidth != 0">开始推流
    </button>
    <button type="button" class="btn btn-danger" v-on:click="stopStreaming"
            v-if="isStreaming == true && config.Activewidth != 0">停止推流
    </button>
    <button type="button" class="btn btn-dark" v-if="config.Activewidth == 0">未连接设备</button>
</div>
<script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="{{ url_for('static',filename='js/main.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
<script>
    new ClipboardJS('.btn');
</script>
</body>
</html>